<template>
 <div>
   <el-card>
     <!-- 头部 -->
     <div class="clearfix">
    <span class="six">说明: 目前支持学科和关键字条件筛选</span>
    <el-button 
    type="success"
    icon="el-icon-edit" 
    size="medium" 
    class="btn" 
    @click="dialogVisible = true"
    >新增试题</el-button>
    <el-dialog :visible.sync="dialogVisible" >
      <AddPage />
    </el-dialog>
  </div>
  <!-- /头部 -->
  <!-- 下拉框 -->
  <el-form :model="requestParameters" ref="requestParameters" label-width="80px">
   <el-row class="row" :gutter="20">
    <el-col :span="6">
      <el-form-item label="学科" prop="subjectName">
        <el-select @focus="getsubject" v-model="requestParameters.subjectName" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in subjectlist.data.items"
            :key="item.id"
            :label="item.subjectName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
  <el-col :span="6">
    <el-form-item label="二级目录" prop="catalogID">
      <el-select @focus="getdirectorys" v-model="requestParameters.catalogID" placeholder="请选择"  style="width:100%">
        <el-option
          v-for="item in directoryslist.data.items"
          :key="item.id"
          :label="item.directoryName"
          :value="item.id">
        </el-option>
  </el-select>
  </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item label="标签" prop="tags">
    <el-select @focus="gettags" v-model="requestParameters.tags" placeholder="请选择" style="width:100%">
    <el-option
      v-for="item in tagslist.data.items"
      :key="item.id"
      :label="item.tagName"
      :value="item.id">
    </el-option>
  </el-select>
   </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item label="关键字" prop="keyword">
    <el-input v-model="requestParameters.keyword" placeholder="请输入内容"></el-input>
    </el-form-item>
    </el-col>
</el-row>
 <el-row :gutter="20">
  <el-col :span="6">
    <el-form-item label="试题类型" prop="questionType">
    <el-select v-model="requestParameters.questionType" placeholder="请选择" style="width:100%">
    <el-option
      v-for="(item,index) in typelist"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
    </el-select>
    </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="难度" prop="difficulty">
      <el-select v-model="requestParameters.difficulty" placeholder="请选择" style="width:100%">
      <el-option
        v-for="(item,index) in difficultylist"
        :key="index"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
  </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item label="方向" prop="direction">
    <el-select v-model="requestParameters.direction" placeholder="请选择" style="width:100%">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
   </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item label="录入人" prop="creatorID">
     <el-select v-model="requestParameters.creatorID" placeholder="请选择"  style="width:100%">
    <el-option
      v-for="(item, index) in people"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
  </el-form-item>
    </el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6">
    <el-form-item label="题目备注" prop="remarks">
    <el-input v-model="requestParameters.remarks" placeholder="请输入内容"></el-input>
    </el-form-item>
  </el-col>

  <el-col :span="6">
    <el-form-item label="企业简称" prop="shortName">
    <el-input v-model="requestParameters.shortName" placeholder="请输入内容"></el-input>
    </el-form-item>
 </el-col>
 
  <el-col :span="6" >
    <el-form-item label="城市" prop="city">
      <div style="display: flex">
      <el-select v-model="requestParameters.city" placeholder="请选择" class="selected">
        <el-option
          v-for="(item,index) in city"
          :key="index"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-select v-model="value" placeholder="请选择" class="selected1">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </div>

  </el-form-item> 
  
  </el-col>
  <el-col :span="6">
    <div class="two-button">
      <el-button @click="handleClear">清除</el-button>
      <el-button type="primary" @click="handleFilter">搜索</el-button>
    </div>
  </el-col>
  <!-- <el-col :span="3">
    <el-form-item label="" prop="city" label-width="0">
    <el-select v-model="value" placeholder="请选择" class="selected1">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
  </el-col> -->
 
</el-row>
</el-form>
<!-- /下拉框 -->
<!-- tab标签 -->
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane :label="item.lable" :name="item.name" v-for="(item, index) in alllist" :key="index">
      <QuestionChoice :tableData="tableData" />
      <!-- 分页 -->
        <div class="pagination">
          <PageTool
            :paginationPage="requestParameters.page"
            :paginationPagesize="requestParameters.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
        <!-- end -->
    </el-tab-pane>
  </el-tabs>
<!-- /tab标签 -->
 </el-card>
 </div>
</template>
<script>
import QuestionChoice from './questions-choices-components'
import { list,getsubject,getdirectorys,gettags } from '@/api/questions-choice'
import PageTool from '../../module-manage/components/page-tool.vue'
import AddPage from './questions-choices-components/add-page.vue'
// import PageTool from './../components/page-tool'
export default {
    data() {
      return {
        alllist:[{
          lable: '全部',
          name: 'quanbu'
        },
        {
          lable:'待审核',
          name: '0'
        },
        {
           lable:'已审核',
           name:'1'
        },
        {
           lable:'已拒绝',
           name:'2'
        }
        ],
        tableData: {},
        options: [],
        value: '',
        input: '',
        activeName: 'quanbu',
        requestParameters: {
        page: 1,
        pagesize: 10,
        subjectID: '',
        catalogID: this.catalogID,
        tags: this.tags,
        keyword: this.keyword,
        remarks:this.remarks,
        questionType: this.questionType,
        difficulty: this.difficulty,
        direction: this.direction,
        creatorID: this.creatorID,
        shortName: this.shortName,
        city: ''

        // username: this.username
      },
       subjectlist: {
         data: {
           items: []
         }
       },
       directoryslist:{
         data:{
           items:[]
         }
       },
       tagslist:{
         data:{
           items:[]
         }
       },
       typelist: ['单选','多选','简答'],
       difficultylist: ['简单','一般','困难'],
       people:['超级管理员','录入管理员'],
       city:['北京','上海','杭州','深圳','郑州','宁波','洛阳'],
       total: null,
       dialogVisible:false
      }
    },
     methods: {
       //新增试题
      //  dialogVisible(){
      //  },
       //tab切换
      handleClick(tab) {
        if (tab.label === '全部') {
          this.requestParameters = {
            page: 1,
            pagesize: 10
          }
          this.getquestions()
        } else {
          this.requestParameters.chkState = tab.name
          this.getquestions(this.requestParameters)
        }
      },
       // 搜索信息
      handleFilter () {
        console.log(1231312313);
        console.log(this.requestParameters);
        this.requestParameters.page = 1
        this.getquestions(this.requestParameters)
      },
      //清除搜索框并重新拉取数据
      handleClear(){
        this.$refs.requestParameters.resetFields()
        this.getquestions()
      },
      //获取数据渲染页面
      getquestions (params) {
        //  this.listLoading = true
        // console.log(this.requestParameters)
        list(this.requestParameters)
        .then(data => {
          console.log(data)
          this.tableData = data.data
          console.log('tableData',this.tableData);
          this.total = this.tableData.counts
        })
        .catch(e => {
          this.$message.e('错了哦，这是一条错误消息')
        })     
      },
      //获取学科列表
      async getsubject() {
        this.subjectlist = await getsubject()
        // console.log('subjectlist', this.subjectlist);
      },
      //获取目录列表
      async getdirectorys(){
        this.directoryslist = await getdirectorys()
        // console.log('directoryslist',this.directoryslist);
      },
      //获取标签列表
      async gettags(){
        this.tagslist = await gettags()
      },
      // 进入某一页
      handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getquestions()
      },
      // 每页显示信息条数
      handleSizeChange (val) {
        console.log('val',val);
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getquestions(this.requestParameters)
      }
    }
    },
    components:{
      QuestionChoice,
      PageTool,
      AddPage
    },
    created() {
      this.getquestions() // 调用自身的方法
      this.getsubject()
      this.getdirectorys()
      this.gettags()
    }
  }
</script>
<style scoped lang='scss'>
.pagination {
  margin-top: 10px;
  text-align: right;
}
.six{
  font-size:12px;
  color:#ffc3ce;
}
.row{
  margin-top:20px;
}
  .btn{
  float: right;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  display:flex;
  .item{
    display:flex;
    flex:2;
    align-items: center;
    justify-content: flex-end;
  }
  .select{
    flex:8;
    margin-left: 20px;
    display:flex;
    .selected{
      flex:1;
      margin-right: 5px;
    }
    .selected1{
      flex:1;
    }
  }
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
// .button{
//   float: right;
//   margin-left: 20px;
// }
.two-button{
  display: flex;
  justify-content: flex-end;
}
</style>